import React, { Component } from 'react';
import {SubmitApi} from '@/request/api'
import { connect } from 'react-redux';
import { alertMapDispatchToProps, showHideAlert } from '@/utils';

class Biancheng extends Component {
  state = {
    //显示隐藏答案
    isShowAnswer: false,
    // 回答内容
    answerContent: ''
  }
  render() {
    let timu = this.props.timu
    // console.log('bianchengtimu',timu);
    return <div className='biancheng' style={{display: timu.questionType === 'code' ? 'block' : 'none'}}>
      <div className="top_title">
        <span>编程</span>
        <p>{ timu.title}</p>
      </div>
      <div dangerouslySetInnerHTML={{ __html: timu.content || '<div></div>' }}></div>
      <textarea className='subject_textarea' placeholder='请输入内容' value={this.state.answerContent} onChange={(e) => {this.setState({answerContent: e.target.value})}}></textarea>
      <p className='subject_tips'>此类型题目暂不支持打分，按正确记分</p>
      <div className="subject_submit" onClick={this.submitFn.bind(this, timu.id,timu.categoryCode)}>确认</div>
      <section style={{display: this.state.isShowAnswer ? 'block' : 'none'}}>
        <div className="subject_answer">
        <span>答案:</span>
        <p dangerouslySetInnerHTML={{__html: timu.answer || '<div></div>'}}></p>
      </div>
      <div className="subject_answer subject_analyze">
        <span style={{display: timu.questionType === 'qa' ? 'none' : 'flex' }}>解析:</span>
        <p>{ timu.analysis}</p>
      </div>
      </section>
    </div>;
  }
  submitFn(id,categoryCode) {
    if (this.state.answerContent.trim() !== '') {
      SubmitApi({
      categoryCode,
      actionType: 'exam_test',
      userAnswer: this.state.answerContent,
      actionCode: this.props.actionCode,
      id
    }).then(res => {
      console.log(res);
      if (res.errCode === 0) {
        // 提示提交成功
        showHideAlert(this.props, {
          icon: 'success',
          title: '提交成功'
        })
        // 显示答案
        this.setState({isShowAnswer: true})
      }
    }).catch(err => {
      // console.log('err',err.response);
      if (err.response.data.errCode === 1003) {
        showHideAlert(this.props, {
          icon: 'error',
          title: err.response.data.data[0]
        })
      }
    })
    } else {
      showHideAlert(this.props, {
          icon: 'error',
          title: '答案不能为空'
        })
    }
  }
}
export default connect(null,alertMapDispatchToProps)(Biancheng)
